/*
* @Author: Josh
* @Date:   2019-01-28 13:01:23
* @Last Modified by:   Administrator
* @Last Modified time: 2019-04-27 14:45:43
*/
'use strict';

require('./index.css');

var _mall               = require('util/mall.js'),
    templatePageination = require('./index.string'),
    Pagination = function(){
        var _this = this;
        this.defaultOption = {
            container    : null,
            pageNum      : 1,
            pageRange    : 3,
            onSelectPage : null
        };

        //事件的处理
        $(document).on('click', '.pg-item', function(){
            var $this = $(this);
            //对active 和 disabled按钮做返回处理
            if($this.hasClass('active') || $this.hasClass('disabled')){
                return;
            }
            typeof _this.option.onSelectPage === 'function' 
                ?  _this.option.onSelectPage($this.data('value')) : null;
        });
    };

//渲染分页组件
Pagination.prototype.render = function(userOption){
    //合并选项 先将defaultOption放入空对象，再用userOption添加或覆盖
    this.option = $.extend({}, this.defaultOption, userOption);
    //判断容器是否为合法jQuery对象
    if(!(this.option.container instanceof jQuery)){
        return;
    }
    //判断是否只有一页
    else if(this.option.pages <= 1){
        return;
    }
    //渲染分页内容
    this.option.container.html(this.getPaginationHtml());
};

//获取分页的html
Pagination.prototype.getPaginationHtml = function(){
    var option    = this.option,
        //显示的第一个页码数字，默认为1
        start     = option.pageNum - option.pageRange > 0 
            ? option.pageNum - option.pageRange : 1,
        //显示的最后一个页码数字，默认为最后一个数字
        end       = option.pageNum + option.pageRange < option.pages 
            ? option.pageNum + option.pageRange : option.pages,
        html      = '',
        pageArray = [];

    //上一页按钮的数据 
    pageArray.push({
        //显示在html的字符
        name     : '上一页',
        //点击时跳转的页数
        value    : this.option.prePage,
        //是否可点击
        disabled : !this.option.hasPreviousPage
    });

    //数字按钮的处理
    for(var i = start; i <= end; i++){
        pageArray.push({
            //显示在html的字符
            name     : i,
            //点击时跳转的页数
            value    : i,
            //是否可点击
            active   : (i === option.pageNum)
        });
    }

    //下一页按钮的数据 
    pageArray.push({
        //显示在html的字符
        name     : '下一页',
        //点击时跳转的页数
        value    : this.option.nextPage,
        //是否可点击
        disabled : !this.option.hasNextPage
    });

    //渲染html
    html = _mall.renderHtml(templatePageination, {
        pageArray : pageArray,
        pageNum   : option.pageNum,
        pages     : option.pages
    });
    return html;
}

module.exports = Pagination; 